<template>
  <div class="settingPayFor">
    <!-- 修改密码 -->
    <!-- 微信配置 -->
    <div class="weixinSet">
      <el-form ref="form" :model="weixinForm" label-width="180px">
        <div class="formTitle">微信支付配置</div>
        <el-form-item label="Appld(应用id)">
          <el-input size="small" placeholder="请输入Appld(应用id)" v-model="weixinForm.Appid"></el-input>
        </el-form-item>
        <el-form-item label="应用秘钥(AppSecret)">
          <el-input size="small" placeholder="请输入应用秘钥(AppSecret)" v-model="weixinForm.AppSecret"></el-input>
        </el-form-item>
        <el-form-item label="微信服务商商户号">
          <el-input size="small" placeholder="请输入微信服务商商户号" v-model="weixinForm.Nober"></el-input>
        </el-form-item>
        <el-form-item label="微信服务商支付Key">
          <el-input size="small" placeholder="请输入微信服务商支付Key" v-model="weixinForm.PayKey"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="padding: 5px 30px"
            size="small"
            type="primary"
            @click="handleSaveWixin"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 支付宝配置 -->
    <div class="zhifubaoSet">
      <el-form ref="form" :model="zhifubaoForm" label-width="180px">
        <div class="formTitle">支付宝配置信息</div>
        <el-form-item label="Appld(应用id)">
          <el-input size="small" placeholder="请输入Appld(应用id)" v-model="zhifubaoForm.appId"></el-input>
        </el-form-item>
        <el-form-item label="商户应用私钥">
          <el-input
            size="small"
            placeholder="请输入商户应用私钥"
            v-model="zhifubaoForm.merchant_private_key"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务商支付宝公钥">
          <el-input size="small" placeholder="请输入服务商支付宝公钥" v-model="zhifubaoForm.alipay_public_key"></el-input>
        </el-form-item>
        <el-form-item label="加密方式(RSA/RSA2)">
          <el-input size="small" placeholder="请输入加密方式(RSA/RSA2)" v-model="zhifubaoForm.sign_type"></el-input>
        </el-form-item>
        <el-form-item label="合作伙伴身份(PID)">
          <el-input
            size="small"
            placeholder="请输入合作伙伴身份(PID)"
            v-model="zhifubaoForm.sys_service_provider_id"
          ></el-input>
        </el-form-item>
        <el-form-item label="签约地址url">
          <el-input size="small" placeholder="请输入签约地址url" v-model="signkey"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="padding: 5px 30px"
            size="small"
            type="primary"
            @click="handleSaveZifubao"
          >保存</el-button>
        </el-form-item>
      </el-form>
      <div class="imgdec">
        <div class="title">德客支付宝配置示例如下：</div>
        <img class="img" src="http://pt.decerp.cn/images/alipayconfig.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 微信数据
      weixinForm: {},
      // 支付宝数据
      zhifubaoForm: {},
      signkey: "",
      // 支付配置开关
      payEnable: true,
      // 身份令牌
      myToken: ""
    };
  },
  methods: {
    handleSaveWixin() {
      if (!this.payEnable) {
        this.$message({
          type: "warning",
          message: "请联系管理员开启支付模式"
        });
        return;
      }
      // 发送请求
      this.$api
        .configPayment(
          "",
          JSON.stringify(this.weixinForm),
          "wechat",
          this.myToken
        )
        .then(res => {
          const { succeed, errmsg } = res;
          if (succeed === true) {
            this.$message({
              message: errmsg,
              type: "success"
            });
          } else {
            this.$message.error(errmsg);
          }
        });
    },
    handleSaveZifubao() {
      if (!this.payEnable) {
        this.$message({
          type: "warning",
          message: "请联系管理员开启支付模式"
        });
        return;
      }
      // config数据过多，超过url上限，使用formdata携带数据请求
      var fileData = new FormData();
      fileData.append("key", this.myToken);
      fileData.append("type", "alipay");
      fileData.append("config", JSON.stringify(this.zhifubaoForm));
      fileData.append("sv_distributor_payconfig_signkey", this.signkey);
      // console.log(JSON.stringify(this.zhifubaoForm));
      this.$api.configPayment(fileData).then(res => {
        const { succeed, errmsg } = res;
        if (succeed === true) {
          this.$message({
            message: errmsg,
            type: "success"
          });
        } else {
          this.$message.error(errmsg);
        }
      });
    }
  },
  mounted() {
    // 获取令牌
    this.myToken = sessionStorage.getItem("myToken");
    // 支付信息
    this.$api.getAgentInformation(this.myToken).then(res => {
      if (res.succeed) {
        const {
          sv_distributor_pay_enable,
          sv_distributor_payconfig_signkey,
          sv_distributor_payconfig
        } = res.values;
        this.payEnable = sv_distributor_pay_enable;
        this.signkey = sv_distributor_payconfig_signkey;
        const payJson = sv_distributor_payconfig;
        const payData = JSON.parse(payJson);
        // weixin
        this.weixinForm = payData.wxpay;
        // alipay
        this.zhifubaoForm = payData.alipay;
      }
    });
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.settingPayFor {
  .weixinSet {
    padding: 20px 50px;
    background-color: #fff;
  }
  .zhifubaoSet {
    margin-top: 20px;
    padding: 20px 50px;
    background-color: #fff;
    .imgdec {
      padding: 30px 10%;
      text-align: center;
      .title {
        font-weight: 600;
        text-align: left;
        margin-bottom: 10px;
        font-size: 14px;
      }
      .img {
        width: 100%;
      }
    }
  }
  .formTitle {
    margin-left: 70px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
.settingPayFor @{deep} .el-input {
  width: 400px;
}
.settingPayFor @{deep} .el-upload-list--picture {
  width: 400px;
}
.settingPayFor @{deep} .el-form {
  padding: 30px 10%;
  box-sizing: border-box;
}
.settingPayFor @{deep} .el-input__inner {
  width: 400px;
}
</style>
